<div class="ui-g">
    <!-- 搜索 begin-->
    <div class="ui-g-12 ui-g-nopad">
        <p-panel header="筛选查询" [collapsed]="false" headerClass="bg-eaeaea border-none" search="编号/动态标题" (onSearch)="search($event);"  (searchTextChange)="searchTextChange($event);">
                <div class="m-r-15 inline-block">
                    <span class="p-r-10">发送对象： </span>
                    <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-150" [options]="sendTypeArr_s" [(ngModel)]="searchObj.sendType" (onChange)="search()"></p-dropdown>
            </div>
            <div class="m-r-15 inline-block">
                    <span class="p-r-10">状态： </span>
                    <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-150" [options]="sendstatusArr" [(ngModel)]="searchObj.sendstatus" (onChange)="search()"></p-dropdown>
            </div>
        </p-panel>
    </div>
    <!-- 搜索 end-->

    <!-- 列表 begin-->
    <div class="ui-g-12 ui-g-nopad m-t-20">
        <div class="content-section implementation b-b-25">
            <p-dataTable [value]="listData" [totalRecords]="totalRecords" [rows]="20" [rowsPerPageOptions]="[20,50,100,300]" [loading]="loading"
                [lazy]="true" (onLazyLoad)="loadCarsLazy($event)" scrollHeight="100px" [paginator]="true" [pageLinks]="4" [(selection)]="selectedItem"
                [headerCheckboxToggleAllPages]="true" [emptyMessage]="'没有搜到您想要的数据'">
                <p-header>
                    <button pButton type="button" label="新建" class="btn btn-secondary" (click)="add()"></button>
                    <button pButton type="button" label="撤回" class="btn btn-secondary" (click)="withdraw()"></button>
                    <button pButton type="button" label="删除" class="btn btn-secondary" (click)="delete()"></button>
                </p-header>
                <p-column [style]="{'width':'38px'}" selectionMode="multiple" ></p-column>
                <p-column *ngFor="let col of colsSelected" [field]='col.field' [header]='col.header' [sortable]="col.sortable" [style]="{'width':col.width}" >
                    <ng-template let-index='rowIndex' let-data='rowData' pTemplate='body' *ngIf="col.tem">
                        <div *ngIf="col.field === 'code'" (click)="edit(data.code)" style="color:#1a91eb;cursor:pointer;">
                            {{data.code}}
                        </div>
                        <div *ngIf="col.field === 'imagePath'" (click)="lookImagesUrl= data.imagePath;lookImages.toggle($event)" style="color:#1a91eb;cursor:pointer;">
                            查看
                        </div>
                        <div *ngIf="col.field === 'forwardUrl'" (click)="openWin(data.forwardUrl)" style="color:#1a91eb;cursor:pointer;">
                            {{data.forwardUrl}}
                        </div>
                    </ng-template>
                </p-column>
            </p-dataTable>
        </div>

    </div>
    <!-- 列表 end-->


    <!-- 表单 begin-->
    <p-dialog [header]="showTitle" [(visible)]="isShow" modal="modal" width="700" [responsive]="true" (onHide)="isEdit?isEdit=!isEdit:'';search()">
      <div class="text-center">
          <div class="inline-block">
              <form #form="ngForm" (ngSubmit)="form.form.valid" novalidate class="form-horizontal" role="form" [ngClass]="{'disabled-readonly':!isEdit}" >
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" [ngClass]="isEdit?'p-required':'p-required-emp'">动态标题：</div>
                        <div class="table-cell text-left" *ngIf="isEdit" relative>
                            <input type="text"  name="title" #title="ngModel" [(ngModel)]="formObj.title" class="p-input width-220"  pInputText
                                (blur)="verifyFields(title,formObj)" (focus)="submited=false;clearVerify(title);" required [ngClass]="(submited||errorObj.title)?'p-input-error':''">
                            <p-message [severity]="'error'"
                                [text]="{'动态标题不能为空':(title.errors?.required&&(errorObj.title?.show || submited))||errorObj.title?.blank}">
                            </p-message>
                        </div>
                        <div class="table-cell table-text text-left" *ngIf="!isEdit" >
                                {{formObj.title}}
                        </div>
                    </div>
                    <div class="table-row" >
                        <div class="table-cell text-right p-l-25" [ngClass]="isEdit?'p-required':'p-required-emp'" style="vertical-align:top">
                            封面图：
                        </div>
                        <div class="table-cell text-left relative" >
                            <div class="pull-left m-l-10" *ngIf="imageArr&&imageArr.length>0">
                                <p-lightboxfile (removeItem)="removeItem($event,'image');changeImges()" styleClass="inline-block" [images]="imageArr" [showDelete]="isEdit"></p-lightboxfile>
                            </div>
                            <div class="ui-g-3 file-item-img " *ngIf="isEdit">
                                <div class="upload">
                                    <div class="icon-plus"></div>
                                    <div class="text">上传图片</div>
                                </div>
                                <p-fileUpload  styleClass="height-full width-full absolute opacity0" [controlAuto]="true"  [url]="uploadRrl"
                                    accept="image/gif,image/png" onlyImg="true" auto="true" maxFileSize="2465792"
                                    cancelLabel="image" #image  (onSelect)="onSelect($event,image)"  (onUpload)="onUpload($event,image);changeImges();">
                                    <ng-template pTemplate="file">
                                    </ng-template>
                                </p-fileUpload>
                            </div>
                            <p-message [severity]="'error'"
                                [text]="{'封面图不能为空':errorObj.image?.show}">
                            </p-message>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell images-hint-div-p width-230"></div>
                        <div class="table-cell images-hint-div-p text-left width-420">
                            <div class="images-hint-div color-b1b1b1" style="top: 3px;margin-bottom: 15px;" *ngIf="isEdit&&isAdd">尺1寸&nbsp;&nbsp;(650*280)&nbsp;&nbsp;只能上传jpg/png格式，文件大小不能超过2M</div>
                            <div class="images-hint-div color-b1b1b1" style="top:-8px;" *ngIf="isEdit&&!isAdd">尺寸2&nbsp;&nbsp;(650*280)&nbsp;&nbsp;只能上传jpg/png格式，文件大小不能超过2M</div>
                            <div class="images-hint-div color-b1b1b1" *ngIf="!isEdit">&nbsp;&nbsp;&nbsp;&nbsp;650*280</div>
                        </div>
                    </div>
                    <div class="table-row">
                      <div class="table-cell text-right p-l-25" [ngClass]="isEdit?'p-required':'p-required-emp'">发送时间：</div>
                      <div class="table-cell text-left" *ngIf="isEdit" >
                            <p-calendar name="sendTime_date" [(ngModel)]="formObj.sendTime_date" styleClass="p-calendar" inputStyleClass="height-full"
                                    [style]="{'width':'34%'}" (onSelect)='changeSendTime()'></p-calendar>
                            <p-calendar name="sendTime_time" [readonlyInput]="false" [(ngModel)]="formObj.sendTime_time" styleClass="p-calendar" icon="fa-clock-o font-18" inputStyleClass="height-full" [timeOnly]="true"
                                    [style]="{'width':'24%'}" (onSelect)='changeSendTime()'></p-calendar>
                            <p-message [severity]="'error'"
                                [text]="{'发送时间不能为空':errorObj.sendTime?.show,'发送时间不能小于当前时间':errorObj.sendTime?.low}">
                            </p-message>
                      </div>
                      <div class="table-cell table-text text-left" *ngIf="!isEdit"  >
                            {{formObj.sendTime_date}}  {{formObj.sendTime_time}}
                      </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" [ngClass]="isEdit?'p-required':'p-required-emp'">跳转链接：</div>
                        <div class="table-cell text-left" *ngIf="isEdit" relative>
                            <input type="text"  name="forwardUrl" #forwardUrl="ngModel" [(ngModel)]="formObj.forwardUrl" class="p-input width-220"  pInputText
                                (blur)="verifyFields(forwardUrl);" (focus)="submited=false;clearVerify(forwardUrl);" maxlength="120" required [ngClass]="(submited || errorObj.forwardUrl )?'p-input-error':'' ">
                            <p-message [severity]="'error'"
                                [text]="{'跳转链接不能为空':(forwardUrl.errors?.required&&(errorObj.forwardUrl?.show || submited))||errorObj.forwardUrl?.blank}">
                            </p-message>
                        </div>
                        <div class="table-cell table-text text-left" *ngIf="!isEdit"  >
                                {{formObj.forwardUrl}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" [ngClass]="isEdit?'p-required':'p-required-emp'">发送对象：</div>
                        <div class="table-cell text-left" *ngIf="isEdit">
                            <p-checkbox *ngFor="let item of sendTypeArr" name="sendType" value="{{item.code}}" label="{{item.name}}"
                                [(ngModel)]="formOptObj.sendType" #sendType="ngModel" (onChange)="changeSendType();" ></p-checkbox>
                            <p-message [severity]="'error'"
                                [text]="{'发送对象不能为空':errorObj.sendType?.show}">
                            </p-message>
                        </div>
                        <div class="table-cell text-left" *ngIf="!isEdit"  >
                                {{formObj.sendTypeDic}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25"></div>
                        <div class="table-cell text-left">
                            <button pButton type="button" *ngIf="!isEdit"  [label]="'编辑'" class="btn-secondary" style="left: 70px;" (click)="isEdit=true;"></button>
                            <button pButton type="button" *ngIf="isEdit"   [label]="'保存'" class="btn-success" style="left: 70px;" (click)="submited=true;save();"></button>
                            <!-- <button pButton type="button"  (click)="form.form.valid?'':submited = true;(form.form.valid&&isEdit)?save():isEdit=true;" [label]="isEdit?'保存':'编辑'" class="btn btn-secondary m-btn-dialog" style="left: 70px;"></button> -->
                        </div>
                    </div>
              </form>
          </div>
      </div>
    </p-dialog>
    <!-- 表单 end-->

    <!-- 图片弹层 begin-->
    <p-overlayPanel #lookImages [showCloseIcon]="true" [dismissable]="false">
        <img  src="{{lookImagesUrl}}" alt="加载失败!"  style="height:500px;"/>
    </p-overlayPanel>
    <!-- 图片弹层 end-->
</div>